<template>
  <px-form-item label="巡检区域" prop="checkArea" :rules="{ required: props.isRequired, message: '请选择巡检区域', trigger: 'change' }">
    <px-cascader
      ref="cascaderRef"
      v-model="checkAreaVal"
      filterable
      clearable
      style="width: 100%"
      :options="checkAreaList"
      :props="cascaderProps"
      placeholder="请选择巡检区域"
      collapse-tags
      collapse-tags-tooltip
      @focus="queryCheckAreaSelect"
      @change="changeCheckArea"
    />
  </px-form-item>
</template>

<script setup lang="ts">
import { watch, onBeforeMount, ref, onMounted } from "vue";
import { queryCheckAreaTree, checkTreeItemType } from "@/api/erc/inspectPlan";

// 父级方法和值
const emits = defineEmits(["changeCheckArea"]);
const props = defineProps(["checkArea", "isRequired", "facCode"]);

const checkAreaVal = ref([]);
const checkAreaList = ref<checkTreeItemType[]>();

const cascaderProps = {
  children: "children",
  label: "name",
  value: "id",
  // checkStrictly: true,
  multiple: true
};
watch(
  () => props.checkArea,
  async val => {
    if (props.checkArea?.length > 0 && checkAreaVal.value.length == 0) {
      await queryCheckAreaSelect();
      checkAreaVal.value = props.checkArea.split(",");
    } else if (props.checkArea?.length == 0) {
      checkAreaVal.value = [];
    }
  },
  { immediate: true }
);

// 获取巡检组下拉列表
const queryCheckAreaSelect = async () => {
  const tempCheckAreaList = await queryCheckAreaTree({
    name: "",
    facCode: props.facCode
  });
  checkAreaList.value = tempCheckAreaList || [];
};
// 改变巡检组值，传值给父级并做改变
const changeCheckArea = () => {
  emits("changeCheckArea", checkAreaVal.value);
};
</script>
